<template>
    <div class="page">
      <div class="page-top"> 
        <span class="left-part">线上缴费</span>
        <span class="right-part">
          <router-link to="/self">返回</router-link>
        </span>
      </div>
      <div class="page-body">
        <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="fees" label="费用名称" width="180">
            <!-- <template #default="scope">{{ scope.row.name }}</template> -->
            </el-table-column>
            <el-table-column prop="amount" label="金额（单位：元）" width="180" />
        </el-table>
        <div class="totalpay">
            <p>费用总和：{{ totalAmount }}元</p>
            <el-button type="primary" @click="open">确实支付</el-button>
        </div>
      </div>
    </div>
  </template>

  <script>
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { pay } from '@/api/user';

  export default {
  data() {
    return {
        tableData: [
        {
          fees: '学费',
          amount: '5000'
        },
        {
          fees: '书本费',
          amount: '500'
        },
        {
          fees: '住宿费',
          amount: '1000'
        },
        {
          fees: '医疗保险',
          amount: '300'
        }
      ],
      totalAmount: 0,  // 费用总和
      selectedRows: []
    }
  },
  methods: {
    handleSelectionChange(val) {
        let sum = 0;
        val.forEach((item) => {
        sum += parseFloat(item.amount);
        });
        this.totalAmount = sum;
        this.selectedRows = val.map(row => this.tableData.indexOf(row));
        console.log('Selected Rows:', this.selectedRows);
    },
    open(){
        ElMessageBox.confirm(
            '支付金额：'+ this.totalAmount+ '元',
            '确认支付',
            {
            confirmButtonText: '支付',
            cancelButtonText: '取消',
            type: 'warning',
            }
        )
            .then(() => {
              pay({amount:this.totalAmount})
              .then(rep=>{
                let code=rep.data.code
                if(code===200){
                  this.$message({
                    type: 'success',
                    message: '支付成功',
              })
            }else {
              ElMessage({
                  type: 'error',
                  message: '支付失败',
              })
            }
              })
            })
            .catch(() => {
            ElMessage({
                type: 'error',
                message: '取消支付',
            })
            })
    }
  }
}
  </script>
    
  <style scoped>
  .page{
    background: rgba(242, 241, 241, 1);
    min-height: 100vh;
  }
  .page-top{
    height: 50px;
    background: rgba(26, 188, 156, 1);
    font-size: 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #FFFFFF;
  }
  .left-part{
      position: relative;
      left: 30px;
    }
    .right-part{
      position: relative;
      right: 60px;
    }
  span{
    margin-left: 20px;
  }
  p{
    text-align: left; 
    margin: 10px;
    border: 4px solid rgba(26, 188, 156, 1);
    border-top:none;border-bottom:none;border-right: none;
  }
  .page-body{
    margin: 20px;
    margin-bottom: 0;
    min-height: 50vh;
    background: #FFFFFF;
    text-align: left;
  }
  /* 点击时去掉下划线 */
  .router-link-active {     
      text-decoration: none;
    }
  /* 去掉原有链接文字下划线 */
    a {
      text-decoration: none; 
      font-size: 20px;
      color: #ffffff;
    }
    .totalpay{
        margin-top: 50px;
        display: flex;
        align-items:center;
    }
    .totalpay p{
        margin-right: 180px;
    }
  </style>